<template>
  <div class="app-container">

    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

      <el-col :span="6">
        <el-form-item label="资料名称:" prop="dataName">
          <el-input v-model="queryParams.dataName" clearable placeholder="请输入资料名称"></el-input>
        </el-form-item>
      </el-col>


      <el-col :span="6">
        <el-form-item label="业务类型:" prop="associatedBusiness">
          <el-select v-model="queryParams.associatedBusiness" clearable>
            <el-option v-for="dict in dict.type.business_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户类型:" prop="associatedCustomer">
          <el-select v-model="queryParams.associatedCustomer" clearable>
            <el-option v-for="dict in dict.type.customer_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="状态:" prop="status">
          <el-select v-model="queryParams.status" clearable>
            <template v-for="dict in dict.type.sys_enable_status">
              <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>


    </SearchContent>

    <div class="card-wrap paddingAll20" :model="queryParams"  label-width="86px">
      <div class="table-title-wrap justify-end">
        <el-button type="primary" size="mini" @click="handleAdd"
                   v-hasPermi="['letterReview:filesConfig:add']">新增资料
        </el-button>
      </div>


      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
            <template slot-scope="scope">
              <template v-if="scope.row.status==2">
                <e-button v-hasPermi="['letterReview:filesConfig:enable']" size="mini" type="text" @click="handleOperate(2,scope.row)"
                >启用
                </e-button>
                <e-button v-hasPermi="['letterReview:filesConfig:edit']" size="mini" type="text" @click="handleOperate(4,scope.row)"
                >编辑
                </e-button>
                <e-button v-hasPermi="['letterReview:filesConfig:void']" size="mini" type="text" @click="handleOperate(5,scope.row)"
                >作废
                </e-button>
              </template>

              <e-button v-hasPermi="['letterReview:filesConfig:disable']" v-else size="mini" type="text" @click="handleOperate(3,scope.row)"
              >禁用
              </e-button>

            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="资料名称" align="center" prop="dataName" min-width="120px" show-overflow-tooltip/>
          <el-table-column label="资料格式" align="center" prop="dataFormat" min-width="120px" show-overflow-tooltip/>
          <el-table-column label="数目" align="center" prop="dataNum" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              {{ row.dataNum }}份
            </template>
          </el-table-column>
          <el-table-column label="存储规格" align="center" prop="dataSize" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              {{ row.dataSize }}M
            </template>
          </el-table-column>
          <el-table-column label="业务类型" align="center" prop="associatedBusiness" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.business_type" :value="row.associatedBusiness"/>
            </template>
          </el-table-column>
          <el-table-column label="客户类型" align="center" prop="associatedCustomer" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.customer_type" :value="row.associatedCustomer"/>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              <span class="enableStatus" :class="{active:row.status ==2}">{{ row.status == 2 ? '禁用' : '启用' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" min-width="120px" show-overflow-tooltip/>
        </template>
      </table-page>
    </div>

    <add-files-config ref="addFilesConfig" :business-type="dict.type.business_type" :customer-type="dict.type.customer_type" @success="handleQuery"></add-files-config>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import Tabs from "@/components/Tabs/index.vue"
import * as filesConfigApi from "@/api/letterReview/filesConfig";
import AddFilesConfig from './add.vue'
export default {
  name: "LRFilesConfig",
  components: {
    SearchContent,
    Tabs,
    AddFilesConfig
  },
  dicts: ['business_type', 'customer_type', 'sys_enable_status'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataName: '',
        associatedBusiness: '',
        associatedCustomer: '',
        customerType: '',
        needCreditReview: '',
        status: '',
      },
      total: 0,
      dataList: []

    };
  },
  mounted() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      filesConfigApi.filesConfigList(this.queryParams).then(res => {
        this.dataList = res.rows;
        this.total = res.total;
      }).finally(() => {
        this.loading = false
      })

    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$nextTick(()=>{
        this.$refs?.queryForm?.resetFields();
        this.handleQuery();
      })
    },

    /** 新增操作 */
    handleAdd() {
     this.$refs.addFilesConfig.show(1)
    },

    handleOperate(type, row) {
      switch (type) {
        case 2://启用
          this.changeStatus(row, 1)
          break
        case 3://禁用
          this.changeStatus(row, 2)
          break
        case 4://编辑
          this.$refs.addFilesConfig.show(2, row.id)
          break
        case 5://删除
          this.deleteRow(row)
          break
      }
    },
    changeStatus(row, status) {
      this.$confirm(`确定${status == 1?'启用':'禁用'}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        filesConfigApi.filesConfigEditStatus({
          id: row.id,
          status: status
        }).then(res => {
          this.handleQuery()
          this.$message.success('操作成功')
        })
      })

    },
    deleteRow(row) {
      this.$confirm('此操作将作废该资料, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        filesConfigApi.filesConfigDelete(row.id).then(res => {
          this.handleQuery()
          this.$message.success('删除成功')
        })
      })
    }

  }
};
</script>
